<template>
  <div id="login">
    <div style="padding: 20px 0 0 20px; margin-bottom: 100px;">
      <div style="font-size: 40px; color: #FFF; font-weight: bold;">**后台管理系统</div>
    </div>
    <div class="login-wrap">
      <img src="../../assets/logo1.png" height="150" />
      <div class="input-wrap">
        <img src="../../assets/profile.png" width="16" />
        <input placeholder="用户名" v-model="userVo.username" />
      </div>
      <div class="input-wrap">
        <img src="../../assets/password.png" width="16" />
        <input placeholder="密码" v-model="userVo.password" type="password" @keyup.enter="login" />
      </div>
      <div class="input-btn-wrap">
        <input type="button" value="登录" v-on:click="login" />
      </div>
    </div>
  </div>
</template>
<script>
  import wxs from '../utils/WxsService'
  export default {
    name: "login",
    data: function () {
      return {
        userVo: {
          username: "",
          password: ""
        },
      };
    },
    methods: {
      login: function () {
        let _that = this;
        if (_that.userVo.username === "") {
          _that.$notify.warning("请输入用户名");
          return;
        }
        if (_that.userVo.password === "") {
          _that.$notify.warning("请输入密码");
          return;
        }
        _that.userVo.nickName = _that.userVo.username;
        let user = wxs.getUserInfo();
        let u = user.filter((item) => {
          if (item.username === _that.userVo.username && item.password === _that.userVo.password) {
            return item;
          }
        });
        if (!u[0].username) {
          _that.$notify.warning("输入信息有误！");
          return;
        }
        window.sessionStorage.setItem("userInfo", JSON.stringify(u[0]));
        this.$router.replace('main/wxs/order');
      }
    }
  };

</script>
<style scoped="scoped">
  .welcome {
    font-size: 36px;
    font-weight: 200;
    color: #fff;
    margin-bottom: 20px;
  }

  .login-wrap {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 20px 50px 20px;
    border-radius: 3px;
    box-shadow: 0 0 10px 5px rgba(205, 204, 204, 0.5);
  }

  .input-wrap {
    padding: 15px 0;
    position: relative;
  }

  .input-wrap img {
    position: absolute;
    top: 30px;
    left: 15px;
  }

  .input-wrap input {
    color: #1f2d3d;
    appearance: none;
    outline: 0;
    width: 220px;
    padding: 10px 30px;
    border: none;
    border-bottom: 1px solid #0082e6;
    font-size: 14px;
    font-family: "微软雅黑";
  }

  .input-wrap input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #97a8be;
    opacity: 1;
    font-family: "微软雅黑";
  }

  .input-wrap input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #97a8be;
    opacity: 1;
    font-family: "微软雅黑";
  }

  .input-wrap input:-ms-input-placeholder {
    color: #97a8be;
    opacity: 1;
    font-family: "微软雅黑";
  }

  .input-wrap input::-webkit-input-placeholder {
    color: #97a8be;
    opacity: 1;
    font-family: "微软雅黑";
  }

  .input-btn-wrap input {
    appearance: none;
    outline: 0;
    width: 280px;
    border: none;
    padding: 10px 15px;
    text-align: center;
    background: #0082e6;
    color: #fff;
    font-size: 14px;
    margin-top: 20px;
    transition: background 0.25s linear;
  }

  .input-btn-wrap input:hover {
    background: #20a0ff;
    transition: background 0.25s linear;
  }

  .desc {
    margin-top: 45px;
    font-size: 12px;
    color: #f9fafc;
  }

  #login {
    background: url(../../assets/333.jpg) no-repeat;
    width: 100%;
    height: 100%;
  }

</style>
